<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
	<head>
		<th:block th:include="include :: header('方法 字段参数选择页面')" />
		<link th:href="@{/css/common.css}" rel="stylesheet"/>
		<link th:href="@{/js/plugins/swiper/swiper-bundle.css}" rel="stylesheet"/>
		<link th:href="@{/css/choose_data_map.css}" rel="stylesheet"/>
		<script th:src="@{/js/plugins/swiper/swiper-bundle.js}"></script>
	</head>
	<body class="">
		<div class="wrapper wrapper-content field">
			<form id="formId">
				<input type="hidden" name="index" th:value="${index}">
				<input type="hidden" id="tableId" name="tableId" th:value="${tableId}">
				<div class="content">
					<div class="pull-left">
						<img th:src="@{/img/add_btn.png}" class = "addTableModelBtn">
					</div>
					<table class="table table-hover" style = "margin-top:10px;">
						<thead>
							<tr>
								<th>表名称</th>
								<th>字段名称</th>
								<th>主表关系类型</th>
								<th>从表关系类型</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</form>
		</div>
	</body>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
		var prefix = ctx + "table/table";
		var tableRelationList = [[${tableRelationList}]] || [];

		$(".addTableModelBtn").click(function() {
			var tableId = $("#tableId").val() || '';
			var btn = ['确定', '取消'];
			var options = {
				title: '选择表字段',
				width: $(window).width() - 50,
				height: $(window).height(),
				url: prefix + "/field_choose?tableId=" + tableId,
				btn: btn,
				callBack: function (index, layero) {
					var iframeWin = layero.find('iframe')[0];
					var tableInfo = iframeWin.contentWindow.submitHandler(index, layero);
					if (tableInfo) {
						for(var i=0; i<tableRelationList.length; i++) {
							if (tableRelationList[i].slaveFieldId == tableInfo.slaveFieldId) {
								layer.close(index);
								return true;
							}
						}
						console.info(tableInfo);
						tableRelationList.push(tableInfo);
						var data = [];
						data.push(tableInfo);
						var tabTplHtml = $("#tabTpl").html();
						laytpl(tabTplHtml).render(data, function (html) {
							$("table tBody").append(html);
						});
						layer.close(index);
					}
					return false;
				}
			};
			$.modal.openOptions(options);
		});

		$(function () {
			if (tableRelationList.length > 0) {
				var tabTplHtml = $("#tabTpl").html();
				laytpl(tabTplHtml).render(tableRelationList, function (html) {
					$("table tBody").append(html);
				});
			}

			$('body').on('click', 'table a', function (e) {
				$(this).parent().parent().remove();
			})
		})

		function submitHandler() {
			if ($.validate.form()) {
				var result = [];
				$("table tbody tr").each(function(){
					var data = {};
					$(this).find("td").each(function () {
						var name = $(this).attr('data-name');
						if (name) {
							var idValue = $(this).attr('data');
							if (idValue) {
								var id = $(this).attr('data-id');
								data[id] = idValue;
								var value=$(this).text();
								data[name] = value;
							} else {
								var input = $(this).find('input')[0];
								var value = $(input).val();
								data[name] = value;
							}
						}
					})
					result.push(data);
				});
				console.info(result);
				return JSON.stringify(result);
			}
			return '';
		}
	</script>
	<script id="tabTpl" type="text/template">
		{{# layui.each(d, function(index, a){ }}
			<tr>
				<td data="{{a.slaveTableId}}" data-id="slaveTableId" data-name="slaveTableName">{{a.slaveTableName}}</td>
				<td data="{{a.slaveFieldId}}" data-id="slaveFieldId" data-name="slaveFieldName">{{a.slaveFieldName}}</td>
				<td data-name="masterRelationType"><input name="masterRelationType{{index}}" class="form-control" type="text" value="{{a.masterRelationType || ''}}" required></td>
				<td data-name="slaveRelationType"><input name="slaveRelationType{{index}}" class="form-control" type="text" value="{{a.slaveRelationType || ''}}" required></td>
				<td><a>删除</a></td>
			</tr>
		{{# }) }}
	</script>
</html>
